﻿@{
    Layout = "_LayoutAdmin";
}

@model CategoryManageViewModel

@section scripts{
    <script>
        $(function () {
            $(".btn-delete").click(function () {
                var cfm = confirm("Delete Confirmation?");
                if (cfm) {
                    deleteCat($(this).data("catid"));
                }
            });

            $(".btn-edit").click(function () {
                editCat($(this).data("catid"));
            });
        });

        function deleteCat(catid) {
            $(`#span-processing-${catid}`).show();
            ajaxPostWithCSRFToken("manage/delete", { id: catid }, function (data) {
                $(`#card-${data}`).hide();
            });
        }

        function initCreateCategory() {
            $("#CategoryEditViewModel_Id").val(emptyGuid);
            $("#edit-form")[0].reset();
            $('#editCatModal').modal();
        }

        function editCat(id) {
            $.get(`manage/edit/${id}`, function (data) {
                $("#CategoryEditViewModel_Id").val(data.id);
                $("#CategoryEditViewModel_RouteName").val(data.routeName);
                $("#CategoryEditViewModel_DisplayName").val(data.displayName);
                $("#CategoryEditViewModel_Note").val(data.note);
                $("#editCatModal").modal();
            });
        }

        $(".btn-submit").click(function () {
            if ($("#edit-form").valid()) {
                var action = '';
                var catId = $("#CategoryEditViewModel_Id").val();
                if (catId == emptyGuid) {
                    action = "create";
                }
                else {
                    action = "edit";
                }

                ajaxPostWithCSRFToken(`manage/${action}`,
                    {
                        "Id": $("#CategoryEditViewModel_Id").val(),
                        "RouteName": $("#CategoryEditViewModel_RouteName").val(),
                        "DisplayName": $("#CategoryEditViewModel_DisplayName").val(),
                        "Note": $("#CategoryEditViewModel_Note").val()
                    },
                    function (data) {
                        $("#edit-form")[0].reset();
                        $("#editCatModal").modal('hide');
                        window.location.reload();
                    });
            }
        });
    </script>
}

<h3>
    @Localizer["Categories"]
    <a class="btn btn-outline-success float-right" href="javascript:initCreateCategory();">
        <span class="icon-plus"></span>
        @Localizer["Create"]
    </a>
</h3>
<hr />

@if (null != ViewBag.HasError && ViewBag.HasError)
{
    <div class="alert alert-danger">
        @ViewBag.ErrorMessage
    </div>
}
else
{
    @Html.AntiForgeryToken()

    <div class="card-columns card-columns-categories">
        @foreach (var cat in Model.Categories.OrderBy(m => m.DisplayName))
        {
            <div class="card mb-4" id="card-@cat.Id">
                <div class="card-body">
                    <h6 class="card-title">
                        <a asp-controller="Category" asp-action="List" asp-route-routeName="@cat.RouteName" target="_blank">
                            @cat.DisplayName
                        </a>
                    </h6>

                    <p class="mt-2 h-30px">
                        @cat.Note
                    </p>

                    <small class="text-muted">@cat.RouteName</small>
                </div>
                <div class="card-footer">
                    <a href="javascript:;" data-catid="@cat.Id" class="btn btn-sm btn-primary btn-edit"><span class="icon-pencil"></span></a>
                    <a href="javascript:;" data-catid="@cat.Id" class="btn btn-sm btn-danger btn-delete"><span class="icon-bin"></span></a>
                    <span id="span-processing-@cat.Id" style="display: none">...</span>
                </div>
            </div>
        }
    </div>
}

<div class="modal fade" id="editCatModal" tabindex="-1" role="dialog" aria-labelledby="editCatModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editCatModalLabel">@Localizer["Category Information"]</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <form id="edit-form" method="post">
                <div class="modal-body">
                    <div asp-validation-summary="All" class="text-danger"></div>
                    <input type="hidden" asp-for="CategoryEditViewModel.Id" />
                    <div class="form-group">
                        <label asp-for="CategoryEditViewModel.DisplayName" class="control-label"></label>
                        <input asp-for="CategoryEditViewModel.DisplayName" class="form-control" />
                        <span asp-validation-for="CategoryEditViewModel.DisplayName" class="text-danger"></span>
                    </div>
                    <div class="form-group">
                        <label asp-for="CategoryEditViewModel.RouteName" class="control-label"></label>
                        <input asp-for="CategoryEditViewModel.RouteName" class="form-control" />
                        <span asp-validation-for="CategoryEditViewModel.RouteName" class="text-danger"></span>
                    </div>
                    <div class="form-group">
                        <label asp-for="CategoryEditViewModel.Note" class="control-label"></label>
                        <input asp-for="CategoryEditViewModel.Note" class="form-control" />
                        <span asp-validation-for="CategoryEditViewModel.Note" class="text-danger"></span>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success btn-submit">@Localizer["Submit"]</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">@Localizer["Cancel"]</button>
                </div>
            </form>
        </div>
    </div>
</div>